<template>
  <div>
    <div class="maintop">
      <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    </div>
    <!-- 内容 -->
    <van-cell title="头像" is-link @click="$refs.input.click()">
      <van-image round width="0.8rem" height="0.8rem" :src="useaInfo.photo" />
    </van-cell>
    <van-cell title="昵称" is-link @click="showName = true">
      <span>{{ useaInfo.name }}</span>
    </van-cell>
    <van-cell title="性别" is-link @click="showGen = true">
      <span>{{ useaInfo.gender === 0 ? '男' : '女' }}</span>
    </van-cell>
    <van-cell title="生日" is-link @click="showGi = true">
      <span>{{ useaInfo.birthday }}</span>
    </van-cell>
    <!-- 头像 -->
    <!-- hidden隐藏   multiple多选 -->
    <input type="file" hidden ref="input" multiple @change="filesa" />

    <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
      <UpdataA
        @gaibian="[(useaInfo.photo = $event), (show = false)]"
        v-if="show"
        @oldguan="show = false"
        :baseurl="baseUrl"
      ></UpdataA>
    </van-popup>
    <!-- 弹窗 -->
    <van-popup v-model="showName" position="bottom" :style="{ height: '100%' }">
      <Upadate
        v-if="useaInfo.name && showName"
        @change="showName = false"
        :usae.sync="useaInfo.name"
      ></Upadate>
    </van-popup>

    <!-- 改变性别
     -->
    <van-popup v-model="showGen" position="bottom" :style="{ height: '35%' }">
      <UpatateGen1
        v-if="useaInfo.name && showGen"
        :useaGender.sync="useaInfo.gender"
        @chagesex="showGen = false"
      ></UpatateGen1>
    </van-popup>
    <!-- 生日 -->
    <van-popup v-model="showGi" position="bottom" :style="{ height: '35%' }">
      <shouGi
        v-if="useaInfo.birthday && showGi"
        :birthday.sync="useaInfo.birthday"
        @chagesex="showGi = false"
      ></shouGi>
    </van-popup>
  </div>
</template>

<script>
import { resovleFile } from '@/utils'
import UpdataA from './components/UpdateAva.vue'
import Upadate from './components/Upadateuseaname.vue'
import UpatateGen1 from './components/updeterGen.vue'
import shouGi from './components/showGi.vue'
import { getUseaInfoApi } from '@/api'
export default {
  components: { Upadate, UpatateGen1, shouGi, UpdataA },
  data() {
    return {
      useaInfo: [],
      showName: false,
      showGen: false,
      showGi: false,
      show: false,
      baseUrl: ''
    }
  },
  async created() {
    const {
      data: { data }
    } = await getUseaInfoApi()
    this.useaInfo = data
  },
  methods: {
    onClickLeft() {
      this.$router.push('/my')
    },
    showPopup() {
      this.showName = true
    },
    async filesa() {
      const fils = this.$refs.input.files[0]
      const base = await resovleFile(fils)
      this.baseUrl = base

      this.show = true
      this.$refs.input.values = ''
    }
  }
}
</script>

<style scoped lang="less">
:deep(.maintop) {
  .van-icon {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar {
    background-color: #3296fa;
  }
}
</style>
